<template>
  <view class="app">
    <view class="main">
      <view class="header">邀请好友加入黔青苗道</view>
      <view class="qrcode-box">
        <view class="qrcode-header">
          <image class="qrcode-avatar" :src="fansStore.fansinfo.avatar || config.custom.avatar"></image>
          <text class="qrcode-nickname">{{ fansStore.fansinfo.nickname || config.custom.nickname }}</text>
        </view>
        <view class="flex items-center flex-col">
          <text class="qrcode-tips">扫一扫图中二维码</text>
          <view class="qrcode-frame">
            <view class="scan-row"></view>
            <view class="scan-col"></view>
            <view class="scan-line"></view>
            <view class="qrcode-scan">
              <view class="z-1 w-350rpx h-350rpx u-skeleton">
                <image
                  class="w-full mt-1 u-skeleton-rect"
                  mode="widthFix"
                  :src="fansStore.invite_qrcode"
                  @error="onErrorImg()"
                />
              </view>
            </view>
          </view>
          <uqrcode
            ref="uqrcodeRef"
            canvas-id="qrcode"
            :value="qrcodeUrl"
            size="200"
            :start="false"
            :options="qrcodeOptions"
            @complete="qrcodeComplete"
            hide
          ></uqrcode>
          <view class="mt-4 mb-5 w-150rpx">
            <image
              class="w-full"
              mode="widthFix"
              src="https://assets.miaodao.qichangsheng.com/c350bddf03168af212275c81e5bdb482.png"
            />
          </view>
        </view>
      </view>
      <view class="footer" v-if="posterInit">
        <view class="save-btn" @click="posterShow = true">生成海报</view>
        <view class="back-btn" @click="nav.back()">返回</view>
      </view>
    </view>

    <u-mask :show="posterShow" @click="posterShow = false" blur="15">
      <view class="h-full flex items-center justify-center">
        <Poster v-if="posterInit" @closePoster="posterShow = false" />
      </view>
    </u-mask>

    <u-skeleton :loading="loading" :animation="true" bgColor="#fff"></u-skeleton>
  </view>
</template>

<script lang="ts" setup>
  import Poster from './poster.vue';
  import { useFansStore } from '@/store/fans';
  import { config } from '@/config/env';
  import { ref } from 'vue';
  import { msg } from '@/utils/msg';
  import { onLoad } from '@dcloudio/uni-app';
  import { nextTick } from 'vue';
  import { nav } from '@/utils/homer';

  const fansStore = useFansStore();
  const posterShow = ref<boolean>(false);
  const posterInit = ref<boolean>(false);
  const loading = ref<boolean>(true);
  const uqrcodeRef = ref();
  let qrcodeOptions = {
    margin: 15,
  };
  const qrcodeUrl = ref<string>('');

  /* #ifdef MP-WEIXIN */
  qrcodeUrl.value = `${config.env.prod.base_url}/wxapp/invite?code=${fansStore.fansinfo.invite_code}`;
  /* #endif */

  /* #ifdef H5 */
  qrcodeUrl.value = `${location.origin}/#/pages/auth/register?code=${fansStore.fansinfo.invite_code}`;
  /* #endif */

  interface QrcodeCompleteResponse {
    success: boolean;
  }

  interface TempFilePath {
    tempFilePath: string;
  }
  const qrcodeComplete = ({ success }: QrcodeCompleteResponse) => {
    if (success) {
      uqrcodeRef.value.toTempFilePath({
        success: ({ tempFilePath }: TempFilePath) => {
          fansStore.invite_qrcode = tempFilePath;
          loading.value = false;
          posterInit.value = true;
        },
      });
    }
  };

  const onErrorImg = () => {
    loading.value = true;
    uqrcodeRef.value.make();
  };

  // fansStore.invite_qrcode = '';

  onLoad(() => {
    if (!fansStore.fansinfo.invite_code) {
      msg.error('请登录');
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
      return;
    }

    if (fansStore.invite_qrcode) {
      loading.value = false;
      posterInit.value = true;
      return;
    }

    nextTick(() => {
      uqrcodeRef.value.make();
    });
  });
</script>

<style lang="scss" scoped>
  .main {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: url(https://assets.miaodao.qichangsheng.com/cbc6f5eecedd0ee2d4a2bcec2f805df5.jpg) no-repeat;
    background-size: cover;

    .header {
      color: #ffffff;
      font-size: 40rpx;
      letter-spacing: 5rpx;
      text-align: center;
      margin: 210rpx 0 15rpx;
    }

    .qrcode-box {
      margin: 120rpx 50rpx 60rpx;
      background: white;
      border-radius: 35rpx;
      box-shadow: rgba(2, 2, 2, 0.1) 0 5rpx 12rpx;

      .qrcode-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        top: -65rpx;

        .qrcode-avatar {
          width: 140rpx;
          height: 140rpx;
          border-radius: 50%;
          border: 8rpx solid #ffffff;
        }

        .qrcode-nickname {
          font-size: 32rpx;
          font-weight: 600;
          margin-top: 8rpx;
        }
      }

      .qrcode-tips {
        color: #757576;
        font-size: 26rpx;
        letter-spacing: 3rpx;
        margin-bottom: 40rpx;
      }

      .qrcode-frame {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        $space: 180rpx;
        .scan-row,
        .scan-col {
          position: absolute;
          background: #ffffff;
        }
        .scan-row {
          width: 100%;
          height: $space;
        }

        .scan-col {
          width: $space;
          height: 100%;
        }

        .scan-line {
          position: absolute;
          width: 100%;
          height: 12rpx;
          background: #c4df9b;
        }

        .qrcode-scan {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 400rpx;
          height: 400rpx;
          border-radius: 40rpx;
          border: 12rpx solid #c4df9b;
          padding: 20rpx;
        }
      }
    }

    .footer {
      display: flex;
      justify-content: center;
      margin-bottom: 60rpx;

      .save-btn,
      .back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;
        border-radius: 50rpx;
        letter-spacing: 2rpx;
        width: 220rpx;
      }
      .save-btn {
        color: #1a5c51;
        background: #c4df9b;
        margin-right: 40rpx;
      }

      .back-btn {
        color: #ffffff;
        background: #006663;
      }
    }
  }
</style>
